* {

        margin: 0;
        padding: 0;
        border: 0;
        
    }

    html {

        overflow: hidden;
        overflow-y: overlay;
        
    }

    body {

        background-color: rgb(54, 57, 63);
        font-family: 'Cabin Condensed', sans-serif;
        letter-spacing: 2px;
        height: 100vh;

    }

    ::-webkit-scrollbar {
        width: 6px;
    }

    ::-webkit-scrollbar-thumb {
        background-color: rgb(165 167 180 / 80%);
        border-radius: 4px;
    }

    ::-webkit-scrollbar-thumb:hover {
        background-color: rgb(145 146 154 / 100%);
    }

    ::-webkit-scrollbar-track {
        background-color: rgb(141 141 141 / 0%);
        border-radius: 0px;
    }

    #particles-js {
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }

    .page-content {
        position: relative;
        width: fit-content;
        margin: auto;
        top: 50%;
        transform: translateY(-50%);
        user-select: none;
    }

    .page-content .title {
        position: relative;
        font-size: 90px;
        text-transform: uppercase;
        font-family: 'Tajawal';
        font-weight: 600;
        color: #d0d3d8;
        line-height: 1;
        text-align: center;
        opacity: 0;
        animation: show_title 1.5s ease-in-out 0s 1 forwards;
    }

    .page-content .description {
        position: relative;
        font-size: 17px;
        text-transform: lowercase;
        font-family: 'Tajawal';
        font-weight: 600;
        color: #a5a5a5;
        line-height: 2;
        text-align: center;
        letter-spacing: 1.5px;
        opacity: 0;
        animation: show_description 1.5s ease-in-out .5s 1 forwards;
    }

    .page-content .button {
        position: relative;
        width: fit-content;
        padding: 12px 25px;
        background-color: #7a9bd4;
        border-radius: 30px;
        margin: 0 auto;
        margin-top: 10px;
        line-height: 1;
        color: #f4f4f4;
        font-family: 'Tajawal';
        text-transform: capitalize;
        letter-spacing: 1px;
        cursor: pointer;
        transition: .3s;
        opacity: 0;
        animation: show_button 1.5s ease-in-out .75s 1 forwards;
    }

    .page-content .button:hover {
        background-color: #6b8cc7;
        box-shadow: 0px 2px 10px rgb(32 33 34 / 25%);
    }

    @keyframes show_title {

        0% {
            opacity: 0;
            transform: translateY(-100px);
        }

        100% {
            opacity: 1;
            transform: translateY(0px);
        }
        
    }

    @keyframes show_description {

        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
        
    }

    @keyframes show_button {

        0% {
            opacity: 0;
            transform: translateY(50px);
        }

        100% {
            opacity: 1;
            transform: translateY(0px);
        }
        
    }